import React, { Component } from 'react'
import Mock from 'mockjs'
const data=Mock.mock({
    "tablist|3":[{
        id:"@id",
        title:"@ctitle",
        "children|3-5":[{
            id:"@id",
            img:"@image(100x100,@color)",
            name:"@cname",
            "price|10-99":10,
        }]
    }]
})

export class tab extends Component {
    constructor(props){
        super(props)
        this.state={
            tablist:data.tablist,
            i:0
        }
    }
  render() {
      const {tablist,i}=this.state
    return (
      <div className='tab'>
          <ul className='left'>
              {tablist.map((item,index)=>{
                  return <li 
                  key={item.id} 
                  onClick={()=>{
                      this.setState({
                          i:index
                      })
                  }}
                  className={index===i?'on':''}
                  >{item.title}</li>
              })}
          </ul>
          <ol className='right'>
              {tablist[i].children.map(v=>{
                  return <li key={v.id}>
                      <img src={v.img} alt="" />
                      <p>{v.name}</p>
                      <p>{v.price}</p>
                  </li>
              })}
          </ol>
      </div>
    )
  }
}

export default tab